<template>
	<view>
		<view class="contract">
			<view class="Today">
				<view>
					<view>
						<view>今日实时</view>
						<view><image src="../static/management/yiwen.png" mode=""></image></view>
					</view>
					<view @tap="Subscription">
						<view>订阅管理</view>
						<view><image src="../static/management/jiantou1.png" mode=""></image></view>
					</view>
				</view>
				<!-- 比上周三同时段 -->
				<view>比上周三同时段</view>

				<!-- 预计收入 (元) -->
				<view class="Income">
					<view :class="{ actived: typeIndex == 1 }" @tap="typeIndex = 1">
						<view>预计收入 (元)</view>
						<view>0.00</view>
						<view>-持平</view>
					</view>
					<view :class="{ actived: typeIndex == 2 }" @tap="typeIndex = 2">
						<view>营业额 (元)</view>
						<view class="Rise">0.00</view>
						<view>-持平</view>
					</view>
					<view :class="{ actived: typeIndex == 3 }" @tap="typeIndex = 3">
						<view>有效订单量</view>
						<view class="Rise">0.00</view>
						<view>-持平</view>
					</view>
					<view :class="{ actived: typeIndex == 4 }" @tap="typeIndex = 4">
						<view>曝光人数</view>
						<view class="Rise">1</view>
						<view class="Risefall">
							<image src="../static/management/shang.png" mode=""></image>
							<text>1</text>
						</view>
					</view>
					<view :class="{ actived: typeIndex == 5 }" @tap="typeIndex = 5">
						<view>进店转化率</view>
						<view class="Rise">100.0%</view>
						<view class="Risefall">
							<image src="../static/management/shang.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
					<view :class="{ actived: typeIndex == 6 }" @tap="typeIndex = 6">
						<view>下单转化率</view>
						<view class="Rise">0.0%</view>
						<view class="Risexia">
							<image src="../static/management/xia.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 图表 -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>
			<!-- 经营分析 -->
			<view class="analysis">
				<view>
					<view>经营分析</view>
					<view><image src="../static/management/yiwen.png" mode=""></image></view>
				</view>
				<view>
					此处展示为真实数据，不影响用户端排名保护与销量展 示。
					<text>疫情期间月售数据保护说明</text>
				</view>
			</view>

			<!-- 昨日 -->
			<view class="tabs">
				<view :class="{ actived: dateTime == 1 }" @tap="dateTime = 1">昨日</view>
				<view :class="{ actived: dateTime == 2 }" @tap="dateTime = 2">近7日</view>
				<view :class="{ actived: dateTime == 3 }" @tap="dateTime = 3">近30日</view>
			</view>

			<!-- 营业收入 -->
			<view class="Operating">
				<view class="Look">
					<view>营业收入</view>
					<view>
						<view>查看全部</view>
						<view><image src="../static/management/jiantou2.png" mode=""></image></view>
					</view>
				</view>
				<!-- 收入 = 营业额 - 支出 -->
				<view class="turnover">收入 = 营业额 - 支出</view>

				<!-- 收入 (元) -->
				<view class="Tuesday">
					<!-- 1 -->
					<view class="income_one">
						<view>收入 (元)</view>
						<view>0.00</view>
						<view>与上周二持平</view>
					</view>
					<!-- 2 -->
					<view class="income_two">
						<view>营业额 (元)</view>
						<view>0.00</view>
						<view>
							<image src="../static/management/shang.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
					<!-- 3 -->
					<view class="income_six">
						<view>支出 (元)</view>
						<view>0.00</view>
						<view>
							<image src="../static/management/xia.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
					<!-- 4 -->
					<view class="income_one" style="margin-top: 47upx;">
						<view>有效订单量</view>
						<view>0.00</view>
						<view>与上周二持平</view>
					</view>
					<!-- 5 -->
					<view class="income_two" style="margin-top: 47upx;">
						<view>单均实付 (元)</view>
						<view>0.00</view>
						<view>
							<image src="../static/management/shang.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
					<!-- 6 -->
					<view class="income_six" style="margin-top: 47upx;">
						<view>无效订单量</view>
						<view>0.00</view>
						<view>
							<image src="../static/management/xia.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
				</view>

				<view class="Look">
					<view>流量转化</view>
					<view>
						<view>查看全部</view>
						<view><image src="../static/management/jiantou2.png" mode=""></image></view>
					</view>
				</view>

				<!-- 下单人数 = 曝光人数 x 进店转化率 x 下单转化率 -->
				<view class="turnover">下单人数 = 曝光人数 x 进店转化率 x 下单转化率</view>

				<view class="Tuesday">
					<!-- 1 -->
					<view class="income_one">
						<view>曝光人数</view>
						<view>0.00</view>
						<view>与上周二持平</view>
					</view>
					<!-- 2 -->
					<view class="income_two">
						<view>进店转化率</view>
						<view>0.00</view>
						<view>
							<image src="../static/management/shang.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
					<!-- 3 -->
					<view class="income_six">
						<view>下单转化率</view>
						<view>0.00</view>
						<view>
							<image src="../static/management/xia.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
				</view>

				<view class="Look">
					<view>营销效果</view>
					<view>
						<view>查看全部</view>
						<view><image src="../static/management/jiantou2.png" mode=""></image></view>
					</view>
				</view>

				<view class="turnover">投入产出比 = 活动订单顾客实付 ÷ 商家补贴</view>

				<view class="Tuesday">
					<!-- 1 -->
					<view class="income_one">
						<view>活动订单量</view>
						<view>0.00</view>
						<view>与上周二持平</view>
					</view>
					<!-- 2 -->
					<view class="income_two">
						<view>商家补贴 (元)</view>
						<view>0.00</view>
						<view>
							<image src="../static/management/shang.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
					<!-- 3 -->
					<view class="income_six">
						<view>投入产出比</view>
						<view>0.00</view>
						<view>
							<image src="../static/management/xia.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
				</view>

				<view class="Look">
					<view>商品分析</view>
					<view>
						<view>查看全部</view>
						<view><image src="../static/management/jiantou2.png" mode=""></image></view>
					</view>
				</view>

				<view class="turnover">提高商品质量，帮助提升销量和复购</view>

				<!-- 热销商品 -->
				<view class="cakes">
					<view>
						<view>热销商品</view>
						<view>销量</view>
						<view>销售额 (元)</view>
					</view>
					<view class="Goods">
						<view>
							<view>1</view>
							<view>鲜肉月饼</view>
						</view>
						<view>1225</view>
						<view>2455.50</view>
					</view>
				</view>

				<!-- 顾客分析 -->
				<view class="Look">
					<view>顾客分析</view>
					<view>
						<view>查看全部</view>
						<view><image src="../static/management/jiantou2.png" mode=""></image></view>
					</view>
				</view>
				<view class="turnover">关注新老客占比，持续拉新，提升老客复购</view>
				<!-- 图表 -->
				<view class="cylindrical"><canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas></view>
				<!-- 服务分析 -->
				<view class="Look">
					<view>服务分析</view>
					<view>
						<view>查看全部</view>
						<view><image src="../static/management/jiantou2.png" mode=""></image></view>
					</view>
				</view>

				<view class="turnover">关注服务质量，提升顾客体验，获得平台权益</view>

				<!-- 取消 -->
				<view class="Tuesday">
					<!-- 1 -->
					<view class="income_one">
						<view>商责取消率</view>
						<view>0.0%</view>
						<view>与上周二持平</view>
					</view>
					<!-- 2 -->
					<view class="income_two">
						<view>催单率</view>
						<view>0.0%</view>
						<view>
							<image src="../static/management/shang.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
					<!-- 3 -->
					<view class="income_six">
						<view>差评率</view>
						<view>0.0%</view>
						<view>
							<image src="../static/management/xia.png" mode=""></image>
							<text>100.0%</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import uCharts from '../js_sdk/u-charts/u-charts/u-charts.js';
import { isJSON } from '../common/checker.js';

var canvaLineA = null;
var lastMoveTime = null; //最后执行移动的时间戳
var canvaRing = null;
var _self;
export default {
	data() {
		return {
			// 线形图
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			// textarea:"",
			// 圆柱图
			serverData: '',
			dateTime: 1,
			typeIndex: 1
		};
	},
	mounted() {
		_self = this;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
		this.getServerData();
		this.getServerData1();
	},

	methods: {
		// 跳转
		Subscription(){
			uni.navigateTo({
				url:"/pages/Management/Subscription"
			})
		},
		getServerData() {
			let _self = this;
			uni.request({
				url: 'https://www.ucharts.cn/data.json',
				header: {
					// 'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
					'content-type': 'application/json' //自定义请求头信息
				}, 
				data: {},
				success: function(res) {
					console.log(res.data.data);
					let LineA = { categories: [], series: [] };
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					LineA.categories = res.data.data.LineA.categories;
					console.log(LineA.categories, 111);
					LineA.series = res.data.data.LineA.series;
					console.log(LineA.series, 222);

					// _self.textarea = JSON.stringify(res.data.data.LineA);
					_self.showLineA('canvasLineA', LineA);
				}
			});
		},
		// 圆柱形
		getServerData1() {
			let _self = this;
			uni.request({
				url: 'https://www.ucharts.cn/data.json',
				data: {},
				success: function(res) {
					console.log(res.data.data);
					let Ring = { series: [] };
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					Ring.series = res.data.data.Ring.series;
					_self.showRing('canvasRing', Ring);
				}
			});
		},
		// 线性图
		showLineA(canvasId, chartData) {
			canvaLineA = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'line',
				colors: ['#facc14', '#f04864'],
				dataLabel: false,
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					type: 'grid',
					gridColor: '#ffffff',
					gridType: 'dash',
					dashLength: 8
				},
				yAxis: {
					gridType: 'dash',
					gridColor: '#ffffff',
					dashLength: 8
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio
			});
		},

		// 圆柱形图表
		showRing(canvasId, chartData) {
			canvaRing = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'ring',
				fontSize: 11,
				legend: true,
				title: {
					name: '全部顾客',
					color: '#666666',
					fontSize: 12 * _self.pixelRatio,
					offsetY: -5 * _self.pixelRatio
				},
				subtitle: {
					name: '100%',
					color: '#666666',
					fontSize: 14 * _self.pixelRatio,
					offsetY: 10 * _self.pixelRatio
				},
				extra: {
					pie: {
						offsetAngle: -45,
						ringWidth: 40 * _self.pixelRatio,
						labelWidth: 15
					}
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				disablePieStroke: true,
				dataLabel: false
			});
		},
		touchRing(e) {
			canvaRing.showToolTip(e, {  
				format: function(item) {
					return item.name + ':' + item.data;
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
	@import './scss/Browse.scss';

</style>